<template>
  <a-card class="body-container">
    <s-list-form>
      <template #less>
        <s-form-item size="list-middle" label="流程名称">
          <s-input v-model="query.flowName" placeholder="流程名称" allow-clear />
        </s-form-item>
        <s-form-item size="list-middle" label="流程类型">
          <s-select v-model="query.flowType" code="FLOW_TYPE" placeholder="流程类型" allow-clear />
        </s-form-item>
        <s-form-item size="list-middle" label="流程状态">
          <s-select
            v-model="query.flowStatus"
            code="FLOW_STATUS"
            placeholder="流程状态"
            allow-clear
          />
        </s-form-item>
      </template>
      <template #more />
    </s-list-form>
    <s-tool-bar>
      <template #left>
        <s-button
          v-if="authorize.insert"
          type="primary"
          icon="plus-outlined"
          @click="
            $refs.add.init((dialog) => {
              ;(itemFormValue = {}), dialog.open()
            })
          "
          >新增</s-button
        >
        <a-popconfirm
          v-if="authorize.deleteMulti"
          title="确认删除所选数据？"
          ok-text="是"
          cancel-text="否"
          @confirm="deleteMulti"
        >
          <s-button type="danger" icon="delete-outlined">删除</s-button>
        </a-popconfirm>
      </template>
      <template #right>
        <s-button type="primary" icon="search-outlined" @click="$refs.table.search(query)"
          >查询</s-button
        >
        <s-button
          style="margin-left: 8px"
          icon="stop-outlined"
          @click="
            () => {
              query = {}
              $refs.table.search(query)
            }
          "
          >重置</s-button
        >
      </template>
    </s-tool-bar>
    <s-table
      ref="table"
      :scroll="{ y: tableHeight }"
      bordered
      :columns="columns"
      url="/workflow/define/pageList"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a
            v-if="authorize.selectOneById"
            style="margin-right: 8px"
            @click="detail(record.id, $refs.detail)"
          >
            <s-icon type="eye-outlined" />查看
          </a>
          <a
            v-if="authorize.update"
            style="margin-right: 8px"
            @click="detail(record.id, $refs.update)"
          >
            <s-icon type="edit-outlined" />编辑
          </a>
          <a
            v-if="authorize.updateFlowData"
            style="margin-right: 8px"
            @click="$refs.flowDesign.open(record.id)"
          >
            <s-icon type="form-outlined" />流程设计
          </a>
          <a-popconfirm
            v-if="authorize.delete"
            title="确认删除此条数据？"
            ok-text="是"
            cancel-text="否"
            @confirm="deleteById(record.id)"
          >
            <a style="margin-right: 8px"> <s-icon type="delete-outlined" />删除 </a>
          </a-popconfirm>
          <a-popconfirm
            v-if="authorize.deploy"
            title="确认发布？"
            ok-text="是"
            cancel-text="否"
            @confirm="deploy(record.id)"
          >
            <a style="margin-right: 8px"> <s-icon type="deployment-unit-outlined" />发布 </a>
          </a-popconfirm>
        </template>
      </template>
    </s-table>
    <!--      <detail ref="detail" />-->
    <s-dynamic-form-dialog
      ref="add"
      v-model="itemFormValue"
      form-id="574f46756d9f4124a440dcfc77f52390"
      title="新增"
      @save="addItem"
    ></s-dynamic-form-dialog>
    <!--      <add
        ref="add"
        @success="
          () => {
            $refs.table.refresh()
          }
        "
      />-->
    <s-dynamic-form-dialog
      ref="detail"
      v-model="itemFormValue"
      title="详情"
      disabled
      form-id="574f46756d9f4124a440dcfc77f52390"
    >
      <s-form-item label="创建人">
        <s-input v-model="itemFormValue.createByAccount" disabled />
      </s-form-item>
      <s-form-item label="创建时间">
        <s-input v-model="itemFormValue.createDate" disabled />
      </s-form-item>
      <s-form-item label="修改人">
        <s-input v-model="itemFormValue.updateByAccount" disabled />
      </s-form-item>
      <s-form-item label="修改时间">
        <s-input v-model="itemFormValue.updateDate" disabled />
      </s-form-item>
    </s-dynamic-form-dialog>
    <s-dynamic-form-dialog
      ref="update"
      v-model="itemFormValue"
      title="编辑"
      form-id="574f46756d9f4124a440dcfc77f52390"
      @save="updateItem"
    >
    </s-dynamic-form-dialog>
    <flow-design ref="flowDesign" />
  </a-card>
</template>

<script>
const columns = [
  {
    title: '流程名称',
    dataIndex: 'flowName',
    sorter: true,
    width: 200,
    ellipsis: true
  },
  {
    title: '流程类型',
    dataIndex: 'flowTypeName',
    sorter: true,
    width: 200,
    ellipsis: true
  },
  {
    title: '流程状态',
    dataIndex: 'flowStatusName',
    sorter: true,
    width: 200,
    ellipsis: true
  },
  {
    title: '创建人',
    dataIndex: 'createByAccount',
    ellipsis: true,
    width: 200
  },
  {
    title: '创建时间',
    dataIndex: 'createDate',
    ellipsis: true,
    width: 200
  },
  {
    title: '修改人',
    dataIndex: 'updateByAccount',
    ellipsis: true,
    width: 200
  },
  {
    title: '修改时间',
    dataIndex: 'updateDate',
    ellipsis: true,
    width: 200
  },
  {
    title: '操作',
    fixed: 'right',
    key: 'action',
    width: 330
  }
]
// import Detail from './detail/index.vue'
// import Add from './add/index.vue'
// import Update from './update/index.vue'
import FlowDesign from './flowDesign/index.vue'
export default {
  name: 'QueryList',
  components: { FlowDesign },
  data() {
    return {
      query: {},
      itemFormValue: {},
      columns: columns
    }
  },
  authorize: '/workflow/define/permissionList',
  methods: {
    addItem(values, fullValue, dialog) {
      this.$api
        .PUT('/workflow/define/insert', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    updateItem(values, fullValue, dialog) {
      values.id = fullValue.id
      this.$api
        .PUT('/workflow/define/update', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    deleteMulti() {
      const keys = this.$refs.table.getSelectedKeys()
      if (keys.length > 0) {
        this.$loading(true)
        this.$api
          .DELETE('/workflow/define/deleteMulti', { ids: keys.toString() })
          .then((res) => {
            this.$loading(false)
            this.$message.info(res.msg)
            this.$refs.table.search(this.query)
          })
          .catch(() => {
            this.$loading(false)
          })
      }
    },
    detail(id, ref) {
      const that = this
      ref.init((dialog) => {
        that.$loading(true)
        that.$api
          .GET('/workflow/define/selectOneById', { id: id })
          .then((res) => {
            that.$loading(false)
            if (!res.data) {
              that.$message.warn('数据不存在')
            } else {
              that.itemFormValue = res.data
              dialog.open()
            }
          })
          .catch(() => {
            that.$loading(false)
          })
      })
    },
    deleteById(id) {
      this.$loading(true)
      this.$api
        .DELETE('/workflow/define/delete', { id: id })
        .then((res) => {
          this.$loading(false)
          this.$message.info(res.msg)
          this.$refs.table.search(this.query)
        })
        .catch(() => {
          this.$loading(false)
        })
    },
    deploy(id) {
      this.$loading(true)
      this.$api
        .GET('/workflow/define/deploy', { id: id })
        .then((res) => {
          this.$loading(false)
          this.$message.info(res.msg)
          this.$refs.table.search(this.query)
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>
